﻿<template>
  <div>
    <h1>计数器示例</h1>
    <p>当前计数: {{ count }}</p>
    <p>两倍计数: {{ doubleCount }}</p>
    <p>三倍计数: {{ tripleCount }}</p>
    <p>全名:{{fullName}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="changeName('New Firstname New Lastname')">改变名字</button>
  </div>
</template>

<script setup>
import {ref, computed, reactive} from 'vue';
const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
// console.log(this.name)
// 响应式状态
const count = ref(0);
// 计算属性来计算两倍数
const doubleCount = computed(() => count.value * 2);
// const doubleCount=ref(0)
// 计算属性来计算三倍数
const tripleCount = computed(() => count.value * 3);

// 方法来增加计数
function increment() {
  count.value++;
}

// 方法来减少计数
function decrement() {
  count.value--;
}

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

function changeName(newFullName) {
  fullName.value = newFullName;
}
</script>